<template>
	<view class="content">
         <view class="noData" v-if="noData==true">
			 <img src="https://cdn.yueyangshuyuan.com/kong.png" />
			 <p>暂无收藏</p>
		 </view>
		 <view class="listCollect" v-if="noData==false">
		 	 <view class="list clearfix" v-for="(item,index) in listCollect" :key=index @tap="goDetail(item)">
				 <img :src="item.merchPic[0].fileUrl" class="left" />
				 <view class="right">
					 <view class="title">{{item.title}}</view>
					 <view class="font">
						 <span class="price">￥<span>{{item.price}}</span></span>
						 <span>元</span>
					 </view>
				 </view>
			 </view>
			 <p class="noFont">没有更多收藏了</p>
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noData:false,
				listCollect:[],
				pageNum:0,
				pageSize:10,
			}
		},
		onReachBottom(){
			// console.log(888888);
			this.pageNum++;
			this.$api.collectList({
				pageNum:this.pageNum,
				pageSize:this.pageSize
			}).then(json=>{
					this.listCollect.push(json.list);
			});
		},
		created() {
		   //collectList
		   this.$api.collectList({
		   	pageNum:this.pageNum,
			pageSize:this.pageSize
		   }).then(json=>{
				 if(!json.list.length){
					  this.noData = true;
				  }else{
					  this.noData = false;
					  this.listCollect=json.list;
				  }
		   });
		},
		methods:{
			goDetail(item){
				uni.navigateTo({
					url: '/pages/detail/detail?merchId='+item.id
				});
			}
		},
	}
</script>

<style lang="scss">
	.content {
		padding:0;
		margin:0;
		background: #fff;
		border-top: 2upx solid #E2E6EE;
	}
	.noData {
		img {
			display: block;
			width:233upx;
		    height:220upx;	
			margin-left:259upx;
			margin-top:259upx;
		}
		p {
			font-size: 26upx;
			color: #777777;
			text-align: center;
			line-height: 48upx;
			margin-top:30upx;
		}
	}
	.list {
		padding:30upx;
		box-sizing: border-box;
		overflow: hidden;
		border-bottom: 2upx solid #E2E6EE;
		img {
			float: left;
			width:200upx;
			height:146upx;
			border-radius: 8rpx;
		}
	    .right {
			float: left;
			width:490upx;
			height:146upx;
			padding-left:30upx;
			box-sizing: border-box;
			.title {
				font-size: 32upx;
				color: #262626;
				font-weight: 700;
				text-overflow:ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp:2;
				word-break: break-all;
				overflow: hidden;
			}
			.font {
				font-size: 20upx;
				color: #777777;
				line-height: 48upx;
				margin-top:20upx;
				.price {
					>span{
						font-size: 32upx;
					}
					color: #E25422;
					margin-right:10upx;
					span {
						font-weight: 700;
					}
				}
			}
		}
	}
	.noFont {
		font-size: 26upx;
		color: #777777;
		text-align: center;
		line-height: 48upx;
		margin-top:40upx;
	}
</style>
